import * as React from "react";
import { useState, useEffect } from "react";
import { Button, DatePicker } from "antd";
import { Moment } from "moment";
const RangePicker:any= DatePicker.RangePicker;
export enum dateEnum {
  "hour" = "hour",
  "date" = "date",
}
interface IDayOrHourTimePickerProps {
  style?: any;
  defaultvalue?: [Moment | null, Moment | null];
  mod?: string;
  onChange: (date: any, dateString: any[]) => any;
}
const DayOrHourTimePicker = (props: IDayOrHourTimePickerProps) => {
  const [time, setTime] = useState<"hour" | "date">("date");
  const [dateString, setDateString] = useState<string[]>(["", ""]);

  const [Bbb, setBbb] = useState<[Moment | null, Moment | null]>(
    props.defaultvalue ? props.defaultvalue : [null, null]
  );
  const getTime = (date: any) => {
    setBbb(date);
  };
  const changTime = (str: "hour" | "date") => {
    setTime(str);
    // setBbb([null, null]);
  };
  let { onChange } = props;

  useEffect(() => {
    switch (time) {
      case "hour":
        if (Bbb[0] && Bbb[1]) {
          setDateString([
            Bbb[0].format("YYYY/MM/DD HH"),
            Bbb[1].format("YYYY/MM/DD HH"),
          ]);
        }
        break;
      case "date":
        if (Bbb[0] && Bbb[1]) {
          setDateString([
            Bbb[0].format("YYYY/MM/DD"),
            Bbb[1].format("YYYY/MM/DD"),
          ]);
        }
        break;

      default:
        break;
    }
  }, [time, Bbb]);

  useEffect(() => {
    let timeType = 2;
    switch (time) {
      case "date":
        timeType = 2;
        break;
      case "hour":
        timeType = 1;
        break;
      default:
        break;
    }
    onChange(timeType, dateString);
  }, [time, dateString, onChange]);
  return (
    <>
      <span style={{ paddingLeft: 26 }}>时间粒度：</span>
      <div className="changeType_btn d_inlineFlex">
        <Button
          className="left"
          type={time === "date" ? "primary" : "default"}
          onClick={() => {
            changTime("date");
          }}
        >
          日
        </Button>
        <Button
          className="center"
          type={time === "hour" ? "primary" : "default"}
          onClick={() => {
            changTime("hour");
          }}
        >
          小时
        </Button>
      </div>
      <span style={{ paddingLeft: 26 }}>时间筛选：</span>
      <RangePicker
        value={Bbb}
        showTime={time !== "date"}
        format={time === "date" ? "YYYY/MM/DD" : "YYYY/MM/DD HH"}
        onChange={(date: any) => {
          getTime(date);
        }}
      />
    </>
  );
};
export default DayOrHourTimePicker;
